<template>
  <div class="body">
    <side-bar></side-bar>
    <Header></Header>
    <!-- <div class="picture"><img src=".././assets/notice.jpg"></div>
    <div class="notice">
      
        
        <el-tag type="warning">输入文件标识，即存证文件数据与用户关联的唯一标识，然后选择文件，再将文件上传到区块链上进行保存。请记住文件标识和交易哈希，方便查询！！！</el-tag>
    </div> -->
  
    
    <div class="inputmessage">
      <el-card class="box-card">
      <h2>请填入以下信息</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <!-- <el-form-item label="用户名称" prop="name">
           <el-input v-model="ruleForm.name"></el-input>
        </el-form-item> -->
        <el-form-item label="文件标识" prop="desc">
           <el-input placeholder="请输入文件标识" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <!-- <el-form-item label="ipfs哈希" prop="ipfs">
           <el-input placeholder="请输入ipfs哈希" v-model="ruleForm.ipfs"></el-input>
        </el-form-item>
        <el-form-item label=" 链ID:">
        <el-select v-model="formInline.region" placeholder="请输入需要上传的链">
       <el-option label="默认" value="默认"></el-option>
      <el-option label="华南链节点" value="华南链节点"></el-option>
      <el-option label="华北链节点" value="华北链节点"></el-option>
      
    </el-select>
    </el-form-item>
    <el-form-item label="  合约地址:">
        <el-select v-model="formInline.user" placeholder="请输入合约地址">
       <el-option label="默认" value="默认"></el-option>
      <el-option label="合约1" value="合约1"></el-option>
      <el-option label="合约2" value="合约2"></el-option>
      
    </el-select>
    </el-form-item> -->
     </el-form>

      <el-upload
         class="upload-demo"
         ref="upload"
         drag
         action=""
         :on-preview="handlePreview"
         :on-remove="handleRemove"
         :on-success="uploadSuccess"
         :on-error="uploadError"
         :before-upload="beforeUpload"
         :before-remove="beforeRemove"
         multiple
         :limit="1"
         :on-exceed="handleExceed"
         :auto-upload="false"
         :file-list="fileList">
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
         
         <div class="el-upload__tip" slot="tip">已选取文件：</div>
      </el-upload>
     </el-card>
     <el-button style="margin-top: 30px;" size="middle" type="success" @click="submitUpload">上传到区块链</el-button>
    </div>
    <div class="upload">
      
    </div>
    
    
    
  
  

<div class="showmessage">
  <el-card class="box-card">
         <h2>当前上传文件链上信息</h2>
         <!-- 区块哈希：{{block_hash}} -->
         <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top:33px;">
            
        <el-form-item label="文件标识" prop="block_height">
           <el-input v-model="ruleForm.file_id" readonly ></el-input>
        </el-form-item>
        <el-form-item label="区块哈希" prop="hash" >
           <el-input :value="hash" readonly></el-input>
          
        </el-form-item>
        <el-form-item label="区块高度" prop="block_height">
           <el-input v-model="ruleForm.block_height" readonly ></el-input>
        </el-form-item>
        <el-form-item label="区块时间戳" prop="block_timestamp">
           <el-input v-model="ruleForm.block_timestamp" readonly></el-input>
        </el-form-item>
        <!-- <el-form-item label="合约地址" prop="contractAddress">
           <el-input v-model="ruleForm.contractAddress" readonly>合约地址</el-input>
        </el-form-item> -->
        <el-form-item label="交易哈希" prop="transactionHash">
           <el-input v-model="ruleForm.transactionHash" readonly>交易哈希</el-input>
        </el-form-item>
         <!-- <el-form-item label="信任时间戳" prop="trust_timestamp">
           <el-input v-model="ruleForm.trust_timestamp" readonly>信任时间戳</el-input>
        </el-form-item> -->
        </el-form>
   </el-card>     
</div>

    
  </div>
</template>

<script>
import SideBar from '.././components/common/SideBar'
import Header from '.././components/content/Header'
import {request} from ".././api/request.js"
import axios from 'axios'
import Web3 from "web3";

export default{
 
  name: 'Upload',
  components: {
    SideBar,
    Header,
    
    
  },
  data(){
    return {
      formInline: {
          user: '',
          region: ''
        },
       
        fileList: [],
        ruleForm: {
          User_id: '',
          file_Id: ''
          },
        rules: {
          name : [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入文件标识 !', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
        },
        strs:'',
        hash:"  "
  }
  },
  methods: {
    //上传成功
    uploadSuccess (response, file, fileList) {
   console.log('上传文件', response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log('上传失败，请重试！')
  },
  //上传之前
  beforeUpload(file){
  //   let fd = new FormData();
  //   fd.append('file',file);//传文件
  //  // fd.append('srid',this.aqForm.srid);//传其他参数
  //   axios.post('http://127.0.0.1:8080/api/upload/chain',fd).then(function(res){
  //          alert('成功');
   // })
  },


  //上传到服务器
  submitUpload() {
       var strs
        var block_hash
    //获取上传文件时当前时间    
    var myDate = new Date();
    var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var myToday = myDate.getDate(); //获取当前日(1-31)
    var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    var myHour = myDate.getHours(); //获取当前小时数(0-23)
    var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
    var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
    var nowTime;
     nowTime = myYear + '.' + myMonth + '.' + myToday +  '  ' + myHour + ':' + myMinute + ':' + mySecond + '  ' ;
        //console.log(nowTime)
        //console.log(typeof nowTime==="string")

        //获取上传的文件对象
        var uploadfile = this.$refs.upload._data.__ob__.value.uploadFiles[0]
        //console.log(uploadfile)
        var reader = new FileReader()
        reader.readAsBinaryString(uploadfile.raw)
        reader.onload = (e) => {
        // Read file contents 
        var cont = e.target.result
        var web3 = new Web3(new Web3.providers.HttpProvider("http://172.31.227.85:30320"));
        //console.log(web3)
        const str = JSON.stringify(cont);
        this.strs = web3.utils.sha3(str);


         var json;
        json ={
          url:"http://172.31.100.77:8082/api/callback",
          private_key:"677cebe62dce385fdbd5b83dda938fe18cece2d3d5a6652e61c9fa7d3949dc71",
          data:[
            {
          
            file_id:"aaa",
            sha256:"sss",
            sm3:"aaa",
            md5:"jjj",
            request_timestamp:"sss",
            
            } 
          ]
        }
        //json.url=window.location.href
        json.data[0].file_id=this.ruleForm.desc
        json.data[0].sha256=this.strs
        // json.data[0].sm3=this.strs
        // json.data[0].md5=this.strs
        json.data[0].request_timestamp=nowTime

       
        console.log(json.data[0].sha256)
        console.log(json.data[0].file_id);
        console.log(json.data[0].request_timestamp);

        axios.post('/api/api/upload/chain',json,{
          headers:{
            'Content-Type':'application/json'
          }
        }).then((res)=>{
          this.$message({
            message: '上传成功，可在右侧查看链上信息',
            type: 'success'
          });
        //对返回数据进行处理
          console.log(res)
          this.hash=res.data.block_hash
          this.ruleForm.block_height=res.data.block_height
          this.ruleForm.block_timestamp=res.data.block_timestamp
         // this.ruleForm.contractAddress=res.data.data[0].contract_addr
          this.ruleForm.transactionHash=res.data.tran_hash
          //this.ruleForm.trust_timestamp=res.data.data[0].trust_timestamp
          this.ruleForm.file_id=res.data.file_id

        }).catch((error)=>{
          console.log(error)
          //this.$message.error('上传失败，请重新上传');
        })
        }
        
     
       
      },

      //上传前删除文件时
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //点击文件列表中已上传的文件时
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning('当前限制选择 1个文件上传');
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
}

</script>

<style scoped>

.inputmessage{
  position:absolute;;
  top:190px;
  left:600px;
  width:450px;
  
}
.showmessage{
position:absolute;
  
  top:190px;
  left:1200px;
  width:450px;
}
.el-upload-dragger{
  width:200px;
}
/* .upload-demo{
  width:100px;
} */
.notice{
   position:absolute;;
  top:120px;
  left:360px;
  width:1000px;

}
.picture{
  position:absolute;;
  top:120px;
  left:385px;
  
}
img{
  width:35px;
}
.body{
  text-align:center;
}




</style>
